<template>
  <div class="app-container">
    <div>
      <div>
        <div slot="header" class="clearfix job-tab-header">
          <span class="span-title">角色管理</span>
        </div>
        <div>
          <div class=" select-container" style="margin-top:-15px">
                <el-row class="">
                  <el-col class="">
                    <el-form ref="form"  label-position='right' size="small" :inline="true" label-width="110px">
                      <el-col :span="5" >
                        <el-form-item label="" prop="name" size='small'  style="margin:12px 5px;">
                              <el-input prefix-icon="el-icon-search" placeholder="请输入角色名称" v-model="listQuery.condition.name.value" clearable></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="5" >
                        <!-- 子系统 -->
                          <el-form-item label="" prop="subsysid" size='small' style="margin:12px 0px;">
                              <el-select placeholder="请选择子系统"  v-model="listQuery.condition.subsysid.value" clearable @focus="editSubSystemsOptions">
                                  <el-option v-for="item in subSystemsOptions" :key="item.id" :label="item.name" :value="item.id">
                                  </el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                      <el-col :span="5" >
                        <!-- 角色状态 -->
                          <el-form-item label="" prop="status" size='small' style="margin:12px 0px;">
                              <el-select placeholder="请选择角色状态" v-model="listQuery.condition.status.value" clearable>
                                  <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key">
                                  </el-option>
                              </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="9" style="padding-left:10px;margin-top:12px;float:right;margin-right:0" algin="left">
                          <el-button size="small" style="height:30px;padding-top:0px;line-height:30px;" type="success" icon="el-icon-edit" @click="getList('find')">查 询</el-button>
                          <el-button size="small" style="height:30px;padding-top:0px;line-height:30px;" type="danger" icon="el-icon-circle-close-outline" @click="handleReset">重 置</el-button>
                          <el-button size="small" style="height:30px;padding-top:0px;line-height:30px;" type="primary" icon="el-icon-circle-plus-outline" @click="handleCreate">新建</el-button>
                         </el-col>
                      </el-form>
                    </el-col>

                </el-row>
          </div>
        </div>
      </div>
      <div>
        <el-table :key='tableKey' :data="list" v-loading="listLoading"
                  element-loading-text="给我一点时间"
                  size="small"
                  height="285px"
                    highlight-current-row style="width: 100%;">
            <el-table-column align="center" label="序号" min-width="50px" type="index">
              <template slot-scope="scope">
              <span>{{scope.$index + (serialNumber - 1) * listQuery.rowBounds.limit + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="角色名称" min-width="70px" prop="name">
                <template slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="子系统名称" min-width="70px" prop="subsysname">
                <template slot-scope="scope">
                    <span>{{scope.row.subsysname}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="组织机构" min-width="70px" prop="orgId">
                <template slot-scope="scope">
                    <span>{{jobfilter(scope.row.orgId)}}</span>
                </template>
            </el-table-column>
            <!--<el-table-column align="center" label="创建人" min-width="100px" prop="cuseridOzOrgUserinfoLoginName">-->
                <!--<template slot-scope="scope">-->
                    <!--<span>{{scope.row.fcUser}}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column align="center" label="角色状态" width="160px" prop="fcTime">
                <template slot-scope="scope">
                    <span>{{scope.row.status | statusFilter}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操 作" width="260" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button style="margin-left:5px;" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button style="margin-left:5px;" type="text" size="small" @click="handleDelete(scope.row,'delete')">删除</el-button>
                    <el-button style="margin-left:5px;" type="text" size="small" @click="handleEditJob(scope.row)">配置人员</el-button>
                    <el-button style="margin-left:5px;" type="text" size="small" @click="handleEditRole(scope.row)">配置权限</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.rowBounds.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <!--新建角色弹出层-->
    <el-dialog
      v-if="dialogVisibleAddRole"
      :close-on-click-modal="false"
      title="创建角色"
      :visible.sync="dialogVisibleAddRole"
      width="70%">
      <newRole @changeCloseDialog="changeCloseDialog"></newRole>
    </el-dialog>
    <!--编辑角色弹出层-->
    <el-dialog
      v-if="dialogVisibleEditRole"
      :close-on-click-modal="false"
      title="编辑角色"
      :visible.sync="dialogVisibleEditRole"
      width="70%">
      <editRole :roleFormData="roleFormData" @changeCloseDialog="changeCloseDialog"></editRole>
    </el-dialog>
    <!--配置人员弹出层-->
    <el-dialog
      v-if="dialogVisibleEditJob"
      :close-on-click-modal="false"
      title="配置人员"
      :visible.sync="dialogVisibleEditJob"
      width="70%">
      <editRoleUser :editJob="editJob" @changeCloseDialog="changeCloseDialog"></editRoleUser>
    </el-dialog>
    <!--配置权限弹出层-->
    <el-dialog
      v-if="dialogVisiblePowerRole"
      :close-on-click-modal="false"
      title="配置权限"
      :visible.sync="dialogVisiblePowerRole"
      width="70%">
      <powerRole :powerRoleData="powerRoleData" @changeCloseDialog="changeCloseDialog"></powerRole>
    </el-dialog>
  </div>
</template>

<script>
import '@/styles/newstyle.scss'
import {
  forceDeleteItem,
  selectSysSubsys,
  SelectRoleAndSubSys
} from '@/api/systemManage/roleManagement'
import {
  userSelected
} from '@/api/systemManage/roleManagementRoleEdit'
import roleManagementEdit from './components/roleManagementEdit'
import roleManagementJobEdit from './components/roleManagementJobEdit'
import roleManagementRoleEdit from './components/roleManagementRoleEdit'
import newRole from './newRole'
import editRole from './editRole'
import editRoleUser from './editRoleUser'
import powerRole from './powerRole'
import {
  isInnerOption,
  statusOptions,
  statusKeyValue,
  isInneNoKeyValue
} from '@/utils/allOptions'

export default {
  components: {
    roleManagementEdit,
    roleManagementJobEdit,
    roleManagementRoleEdit,
    newRole,
    editRole,
    editRoleUser,
    powerRole
  },
  directives: {},
  data() {
    return {
      dialogVisibleAddRole: false,
      dialogVisibleEditRole: false,
      dialogVisibleEditJob: false,
      dialogVisiblePowerRole: false,
      roleFormData: {},
      editJob: {},
      powerRoleData: {},
      listData: [],
      // -------Options-----------
      isInnerOption,
      statusOptions,
      subSystemsOptions: [],
      // -------Options-----------
      // 0:检索 1:编辑/新建 2:配置岗位 3:配置权限
      editType: '',
      // table list
      tableKey: 0,
      list: null,
      listQuerySelected: {
      },
      listQuery: {
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: {
          name: {
            property: 'name',
            value: '',
            type: 'LIKE'
          },
          subsysid: {
            property: 'subsysid',
            value: '',
            type: 'EQ'
          },
          // isInner: {
          //   property: 'isInner',
          //   value: '',
          //   type: 'EQ'
          // },
          status: {
            property: 'status',
            value: '0',
            type: 'EQ'
          }
        },
        fields: [],
        sort: [
          {
            direction: 'DESC',
            property: 'fcTime'
          }
        ]
      },
      total: null,
      listLoading: false,
      // table list
      selectId: '',
      selectRoleName: '',
      selectSubsysid: '',
      selectRoleid: '',
      serialNumber:1
    }
  },
  // 画面刚进入method
  mounted() {
    this.editSubSystemsOptions()
    this.getList()
    this.getSysUserList()
  },
  filters: {
    yesOrNoFilter(target) {
      return isInneNoKeyValue[target]
    },
    statusFilter(target) {
      return statusKeyValue[target]
    }
  },
  computed: {
    jobfilter() {
      return function(index) {
        if (index !== null) {
          for (const item of this.listData) {
            if (item.codeKey == index) {
              return item.codeName
            }
          }
        }
      }
    }
  },
  methods: {
    changeCloseDialog() {
      this.dialogVisibleAddRole = false
      this.dialogVisibleEditRole = false
      this.dialogVisibleEditJob = false
      this.dialogVisiblePowerRole = false
      this.getList()
    },
    editSubSystemsOptions() {
      const query = {
        sort: [
          {
            direction: 'ASC',
            property: 'id'
          }
        ]
      }

      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.subSystemsOptions = []
          for (const item of records) {
            const input = {}
            input.id = item.id
            input.name = item.name
            this.subSystemsOptions.push(input)
          }
        }
      })
    },
    resetInfo() {
      this.editType = ''
    },
    handleCreate() {
      this.editType = '0'
      this.dialogVisibleAddRole = true
      // this.$router.push({
      //   name: 'newRole',
      //   params: { id: this.$store.getters.orgId }
      // })
    },
    getSysUserList() {
      let args = {}
      args.codeType = 'SYS_ORG'
      args.codeStatus = '0'

      this.$store.dispatch('SysCodeListByCodeType', args).then(res => {
        let data = res.data
        if (data && data.length > 0) {
          data.forEach((item, i) => {
            item.id = JSON.stringify({
              'id': item.codeKey,
              'name': item.codeName
            })
          })
        }
        this.listData = data
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },
    // 检索条件框回车键按下后，跳转到首页
    handleFilter() {
      this.listQuerypage = 1
      this.getList()
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.listQuerypage = 1
      this.listQuery.rowBounds.limit = val
      this.listQuery.rowBounds.offset = this.listQuery.rowBounds.limit * (this.serialNumber - 1)
      this.getList()
    },
    // 翻页器使用
    handleCurrentChange(val) {
      this.serialNumber = val
      this.listQuerypage = val
      this.listQuery.rowBounds.offset =
        this.listQuery.rowBounds.limit * (val - 1)
      this.getList()
    },
    handleDelete(row,flag) {
      this.$confirm('此操作将删除角色【' + row.name + '】及角色人员和角色权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const condition = {
            id: row.id
          }
          forceDeleteItem(condition).then(response => {
            this.$message({
              message: '删除成功。',
              type: 'success'
            })
            this.getList(flag)
          })
        })
        .catch(error => {
          console.error(error)
        })
    },
    displayMain() {
      this.resetInfo()
      this.getList()
    },
    handleEdit(row) {
      this.roleFormData = row
      this.dialogVisibleEditRole = true
      // this.$router.push({ name: 'editRole', params: { roleInfo: row }})
    },
    handleEditJob(row) {
      this.selectRoleName = row.name
      this.selectSubsysid = row.subsysid
      this.selectRoleid = row.roleid
      this.editJob = row
      this.dialogVisibleEditJob = true
      // this.$router.push({
      //   name: 'editRoleUser',
      //   params: { id: row.id, rowId: row.orgId }
      // })
    },
    handleEditRole(row) {
      this.selectRoleName = row.name
      this.selectSubsysid = row.subsysid
      this.selectRoleid = row.roleid
      this.powerRoleData = row
      this.dialogVisiblePowerRole = true
      // this.$router.push({
      //   name: 'powerRole',
      //   params: { id: row.orgId, rowId: row.id }
      // })
    },
    getList(flag) {
      this.listLoading = true
      this.listQuery.orgId = this.$store.getters.orgId
      if (flag === 'find') {
        this.listQuery.rowBounds.offset = 0
        this.serialNumber = 1
        this.total = 0
      }
      if (flag ==='delete') {
        if (this.listQuery.rowBounds.offset == (this.total - 1)
         && this.listQuery.rowBounds.offset >= this.listQuery.rowBounds.limit) {
          this.listQuery.rowBounds.offset -=this.listQuery.rowBounds.limit
          this.serialNumber -=1
        }
      }
      const that = this
      //compositeSelect(this.listQuery).then(response => {
      SelectRoleAndSubSys(this.listQuery).then(response => {
        this.list = response.data.data.records
        this.total = response.data.data.count
        this.listLoading = false
      })
    },
    handleReset() {
      this.listQuery.condition.name.value = ''
      this.listQuery.condition.status.value = '0'
      this.listQuery.condition.subsysid.value = ''
      this.listQuery.rowBounds.offset = 0
      this.listQuery.rowBounds.limit = 10
      this.list = null
      this.total = 0
      this.serialNumber = 1
      this.getList()
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.select-container {
  padding: 10px 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #eeeeee;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 3px 5px;
}
</style>
